<template>
  <div class="aboutCoin">
    <!-- <x-header :left-options="{backText: ''}">关于币哩币哩</x-header> -->
    <top :text="'关于币哩币哩'"></top>
    <div style="height: 45px;"></div>
    <div class="know">
      <span>认识马六甲</span>
    </div>
    <div class="aboutCoinText">
      <span>马六甲比特币基金是知名数字货币投资机构，旗下拥有数字货币定期理财产品、区块链私募投资和数字货币交易所等业务。我们将提供安全有保障的投资项目，您可以将闲散资金交给有融资需求的优质企业，轻松赚取远高于银行定期存款的收益。</span>
    </div>
    <div class="aboutIcon">
      <ul>
        <li>
          <img src="../../assets/aboutIcon1.png" alt="" width="30">
          <div class="aboutDes">
            <div>平稳运营时间</div>
            <div>2年5个月</div>
          </div>
        </li>
        <li>
          <img src="../../assets/aboutIcon2.png" alt="" width="30">
          <div class="aboutDes">
            <div>已付用户收益</div>
            <div>62837万</div>
          </div>
        </li>
        <li>
          <img src="../../assets/aboutIcon3.png" alt="" width="30">
          <div class="aboutDes">
            <div>累计客户数量</div>
            <div>43080人</div>
          </div>
        </li>
        <li>
          <img src="../../assets/aboutIcon4.png" alt="" width="30">
          <div class="aboutDes">
            <div>用户投资总额</div>
            <div>99673万</div>
          </div>
        </li>
        <div style="clear: both"></div>
      </ul>
    </div>
    <div class="aboutFoot">
      <div>
        <div class="mt10">
          <img src="../../assets/start.png" alt="" width="20" class="middle">
          <span class="whiteColor middle">行业权威</span>
        </div>
        <div class="whiteColor mt20">
          我们曾与巴比特，巴比特论坛，sosobtc，金色财经，比特币之家，BTC123等行业主流机构展开过深入合作。
        </div>
      </div>
      <div>
        <div class="mt10">
          <img src="../../assets/start.png" alt="" width="20" class="middle">
          <span class="whiteColor middle">本息保障</span>
        </div>
        <div class="whiteColor mt20">
          公司自有数字资产超过5亿，在协议范围内，能够保证投资者的资金安全问题。
        </div>
      </div>
      <div>
        <div class="mt10">
          <img src="../../assets/start.png" alt="" width="20" class="middle">
          <span class="whiteColor middle">稳定收益</span>
        </div>
        <div class="whiteColor mt20">
          1000元起投，无风险套利，最高年化益32.0%轻松赚取数字货币行业的发展红利。
        </div>
      </div>
      <div>
        <div class="mt10">
          <img src="../../assets/start.png" alt="" width="20" class="middle">
          <span class="whiteColor middle">用户信赖</span>
        </div>
        <div class="whiteColor mt20">
          用户重复投资比例超过80%，深得用户信赖。
        </div>
      </div>
      <div>
        <div class="mt10">
          <img src="../../assets/start.png" alt="" width="20" class="middle">
          <span class="whiteColor middle">快速赎回</span>
        </div>
        <div class="whiteColor mt20">
          平台自建资产交易平台，可提前转让退出，也可到期赎回。
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { XHeader } from 'vux'
  import Top from '../../components/common/top.vue'
  export default {
    data() {
      return {

      }
    },
    methods: {
      onConfirm() {

      }
    },
    components: {
      XHeader,
      Top
    }
  }
</script>
<style lang="less" scoped>
  .whiteColor {
    color: #fff;
  }

  .mt10 {
    margin-bottom: 10px;
  }

  .mt20 {
    margin-bottom: 20px;
  }

  .middle {
    vertical-align: middle;
  }

  .aboutCoin .vux-header {
    position: relative;
    padding: 3px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
  }

  .aboutCoin .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .aboutCoin .vux-header .vux-header-title {
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #000;
  }

  .aboutCoin {
    background: url('../../assets/aboutCoinBg.png');
    width: 100%;
    /* height: 1041px; */
    /* background-size: cover; */
    padding-bottom: 20px;
    background-size: 100% 100%;
  }

  .aboutCoin .know {
    text-align: center;
    color: #fff;
    height: 40px;
    line-height: 40px;
    position: relative;
  }

  .aboutCoin .know::before {
    content: "";
    width: 30px;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 19px;
    left: 27%;
  }

  .aboutCoin .know::after {
    content: "";
    width: 30px;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 19px;
    left: 64%;
  }

  .aboutCoin .aboutCoinText {
    color: #fff;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 15px;
    margin-top: 10px;
  }

  .aboutCoin .aboutIcon {
    margin-top: 30px;
    margin-left: 10px;
  }

  .aboutCoin .aboutIcon ul li {
    float: left;
    list-style: none;
    width: 45%;
    height: 60px;
    background: #fff;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    position: relative;
    img {
      margin-left: 20px;
      margin-top: 13px;
    }
  }

  .aboutCoin .aboutDes {
    position: absolute;
    left: 58px;
    top: 10px;
    color: #ff1010;
    font-size: 13px;
  }

  .aboutCoin .aboutIcon ul li:nth-child(2n) {
    margin-right: 0px;
  }

  .aboutCoin .aboutFoot {
    padding: 0px 15px;
  }
</style>